{% from 'macros/button/index.xml.njk' import button %}
{% from 'macros/description/index.xml.njk' import description %}

{{ description('Tapping the button below will unselect all the options of a Select Single element.') }}

<select-single id="id_ss" name="ss" style="select">
  <view style="select-separator" />
  <option style="select-option" value="option1" selected="true">
    <text style="select-label">Option 1</text>
    <view style="select-radio-outer">
      <view style="select-radio-inner" />
    </view>
  </option>
  <view style="select-separator" />
  <option style="select-option" value="option2">
    <text style="select-label">Option 2</text>
    <view style="select-radio-outer">
      <view style="select-radio-inner" />
    </view>
  </option>
  <view style="select-separator" />
  <option style="select-option" value="option3">
    <text style="select-label">Option 3</text>
    <view style="select-radio-outer">
      <view style="select-radio-inner" />
    </view>
  </option>
  <option style="select-option" value="">
    <text style="select-label">Option 4</text>
    <view style="select-radio-outer">
      <view style="select-radio-inner" />
    </view>
  </option>
  <view style="select-separator" />
</select-single>

{% call button('Unselect All') -%}
  <behavior action="unselect-all" target="id_ss" />
{%- endcall %}
